<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>City训练结果</title>
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/trainingResult.css' %}">

    <script>//实现隐藏导航的效果
    toggleNavbar = function () {
        const navbar = document.getElementById('navbar');
        const mainContent = document.getElementById('main-content');
        const toggleButton = document.getElementById('toggleButton'); // 获取按钮元素

        if (navbar.classList.contains('hidden')) {
            navbar.classList.remove('hidden'); // 显示导航
            mainContent.style.width = '80%'; // 恢复主内容宽度
            toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="城市图标">'; // 切换按钮文字
        } else {
            navbar.classList.add('hidden'); // 隐藏导航
            mainContent.style.width = '100%'; // 主内容占满整个页面
            toggleButton.innerHTML = '<img  class="button4-icon" src="{% static 'icons/chevron-right.svg' %}" alt="城市图标">'; // 切换按钮文字
        }
    }
    </script>

    <script>//实现下载文件（实时预测文件+历史数据）
    function downloadTableData() {
        const tables = ['live-data', 'history-data'];
        let csv = [];

        tables.forEach(tableId => {
            let table = document.getElementById(tableId);
            let rows = table.rows;

            for (let i = 0; i < rows.length; i++) {
                let cols = rows[i].querySelectorAll('td, th');
                let row = Array.from(cols).map(col => col.innerText).join(',');
                csv.push(row);
            }

            // 添加空行分隔表格
            csv.push('');
        });

        let csvString = csv.join('\n');
        let blob = new Blob([csvString], {type: 'text/csv;charset=utf-8;'});
        let link = document.createElement('a');
        link.setAttribute('href', URL.createObjectURL(blob));
        link.setAttribute('download', 'tables_data.csv');
        link.style.visibility = 'hidden';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    document.getElementById('downloadBtn').addEventListener('click', downloadTableData);
    </script>

</head>
<body>

<div class="sidebar" id="navbar"> <!--导航-->
   <img class="logo" src="{% static 'icons/logo.jpg' %}" alt="logo图标">
    <p class="title">SecTraffic</p>
    <p class="underline"></p>
    <div>
        <a href="{% url 'training' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/building.png' %}" alt="城市图标">
                <span> City----我要训练</span>
            </button>
        </a>
    </div>
    <div>
        <a href="{% url 'predicting' %}">
            <button class="button1">
                <img class="button1-icon" src="{% static 'icons/building.png' %}" alt="城市图标">
                <span> City----我要预测</span>
            </button>
        </a>
    </div>
</div>


<div class="content" id="main-content">
    {#  实现主页面#}
    <p>
        <!-- 点击按钮以隐藏或显示导航 -->
        <button class="button4" onclick="toggleNavbar()" id="toggleButton">
            <img class="button4-icon" src="{% static 'icons/chevron-left.svg' %}" alt="隐藏">
        </button>
    </p>
    <div class="truck-container"><img class="truck-icon" src="{% static 'icons/truck.png' %}" alt="卡车图标"></div>

    <div class="text-container">
        <p class="content-text">City模型参数，训练结果已替换原模型数据</p>
    </div>

    <div class="table-container">
        <p class="Table-text-container">
        <p class="Table-text">实时预测：</p>

        <table>
            <thead>
            <tr>
                <th>参数一</th>
                <th>参数二</th>
                <th>参数三</th>
            </tr>

            <tbody id="live-data">
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>

        <p class="Table-text-container">
        <p class="Table-text">历史数据:</p>

        <table>
            <thead>
            <tr>
                <th>参数一</th>
                <th>参数二</th>
                <th>参数三</th>
            </tr>
            </thead>
            <tbody id="history-data">
            <!-- 历史预测数据行 -->
            </tbody>
        </table>
    </div>

    <div class="page-button-container">
        {#分页按钮#}
        <button class="page-button" id="first-page">首页</button>
        <button class="page-button" id="prev-page">上一页</button>
        <span id="page-info">第 1 页</span>
        <button class="page-button" id="next-page">下一页</button>
        <button class="page-button" id="last-page">尾页</button>
    </div>


    <a href="{% url 'training' %}">
        <button class="left-button5">重新训练</button>
    </a>
    <button class="right-button5" onclick="downloadTableData()">下载训练结果</button>

    <button class="button2" onClick="location.href='/City/training'">开<br>始<br>训<br>练</button>

    <button class="button3">训<br>练<br>结<br>果</button>
</div>


<script>//实现加页功能

const data = Array.from({length: 50}, (_, i) => ({
    col1: `数据 ${i + 1} - 列1`,
    col2: `数据 ${i + 1} - 列2`,
    col3: `数据 ${i + 1} - 列3`
}));
{#模拟数据#}
let currentPage = 1;
const rowsPerPage = 7;

function renderTable() {
    const tableBody = document.getElementById('history-data');
    tableBody.innerHTML = '';

    const start = (currentPage - 1) * rowsPerPage;
    const end = start + rowsPerPage;
    const paginatedData = data.slice(start, end);

    paginatedData.forEach(item => {
        const row = document.createElement('tr');
        row.innerHTML = `<td>${item.col1}</td><td>${item.col2}</td><td>${item.col3}</td>`;
        tableBody.appendChild(row);
    });

    updatePaginationInfo();
}

function updatePaginationInfo() {
    const pageInfo = document.getElementById('page-info');
    pageInfo.textContent = `第${currentPage}页 , 共${Math.ceil(data.length / rowsPerPage)}页`;
}

// 分页控制
document.getElementById('first-page').addEventListener('click', () => {
    currentPage = 1;
    renderTable();
});

document.getElementById('prev-page').addEventListener('click', () => {
    currentPage = Math.max(currentPage - 1, 1);
    renderTable();
});

document.getElementById('next-page').addEventListener('click', () => {
    currentPage = Math.min(currentPage + 1, Math.ceil(data.length / rowsPerPage));
    renderTable();
});

document.getElementById('last-page').addEventListener('click', () => {
    currentPage = Math.ceil(data.length / rowsPerPage);
    renderTable();
});

// 初次渲染
renderTable();

</script>
</body>
</html>

